<template>
  <el-dialog
    title="支付详情"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="700px"
    :before-close="cancel">
    <div>
      <div style="margin: 0 0 20px 0; font-weight: bold">
        <span style="margin-right: 30px">实际支付总金额：{{ CurentData.payTotalAmount.split('.')[0] }} </span
        >渠道：
        <span v-if="CurentData.payChannel == '1'">ali Pay</span>
        <span v-else-if="CurentData.payChannel == '2'">Wechat Pay</span>
        <span v-else-if="CurentData.payChannel == '3'">stripe Pay</span>
        <span v-else-if="CurentData.payChannel == '4'">线下现金</span>
        <span v-else-if="CurentData.payChannel == '5'">线下银行卡</span>
        <span v-else-if="CurentData.payChannel == '6'">积分支付</span>
      </div>
      <el-table :height="calTableHeight() - 100" ref="TableRef" :data="CurentData.itemList">
        <el-table-column show-overflow-tooltip :label="$t('账单类型')" align="center" prop="businessAmount">
          <template slot-scope="scope">
            {{ handlePayType(FormData.type) }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('业务金额')" align="center" prop="businessAmount">
          <template slot-scope="scope">
            {{ scope.row.businessAmount.split('.')[0] }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          show-overflow-tooltip
          :label="$t('平台手续费率')"
          align="center"
          prop="platformHandlingFee" /> -->
        <el-table-column
          show-overflow-tooltip
          :label="$t('平台手续费率')"
          align="center"
          prop="platformHandlingFee">
          <template slot-scope="scope"> {{ scope.row.platformHandlingFee * 100 }}% </template>
        </el-table-column>
        <el-table-column :label="$t('应收金额')" align="center" prop="payAmount" />
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t('关闭') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getPayInfo } from '@/api/bill/seller'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    handlePayType: {
      type: Function,
    },
    FormData: {
      type: Object,
      default: () => {},
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      CurentData: {
        itemList: [],
        payChannel: '',
        payTotalAmount: '',
      },
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.getPayInfor()
      }
    },
  },
  mounted() {},
  methods: {
    /**获取支付详情 */
    getPayInfor() {
      this.CurentData = {
        itemList: [],
        payChannel: '',
        payTotalAmount: '',
      }
      getPayInfo({ id: this.FormData.id }).then((res) => {
        console.log(res, 'itemList')
        this.CurentData = res.data
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
